<template>
  <div class="employees">
    <el-card>
      <el-row type="flex" justify="space-between">
        <el-col :span="6">
          <div class="info-box">
            <!-- 图标 -->
            <i class="el-icon-info" />
            <span>共 {{ total }} 条数据</span>
          </div>
        </el-col>

        <el-col :span="6">
          <el-button
            type="success"
            size="mini"
            @click="$router.push('/import')"
          >导入</el-button>
          <el-button
            type="warning"
            size="mini"
            @click="exportExcel"
          >导出</el-button>
          <el-button
            type="primary"
            size="mini"
            @click="ShowDialog"
          >新增员工</el-button>
        </el-col>
      </el-row>
    </el-card>

    <el-card>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed type="index" label="序号" width="200" />
        <el-table-column prop="username" label="姓名" width="200" />
        <el-table-column prop="mobile" label="手机号" width="200" />
        <el-table-column prop="workNumber" label="工号" width="200" />
        <el-table-column
          :formatter="formatEmp"
          prop="formOfEmployment"
          label="聘用形势"
          width="200"
        />
        <el-table-column prop="departmentName" label="部门" width="200" />
        <el-table-column prop="timeOfEntry" label="入职时间" width="200">
          <template #default="{ row }">
            <span>
              {{ row.timeOfEntry | formatDate }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="zip" label="状态" width="200" />
        <el-table-column fixed="right" label="操作" width="250">
          <template #default="{ row }">
            <el-button
              type="text"
              size="small"
              @click="handleClick(row)"
            >查看</el-button>
            <el-button type="text" size="small">转正</el-button>
            <el-button type="text" size="small">调岗</el-button>
            <el-button type="text" size="small">离职</el-button>
            <el-button type="text" size="small">角色</el-button>
            <el-popconfirm
              title="这是一段内容确定删除吗？"
              @onConfirm="onConfirm(row)"
            >
              <el-button
                slot="reference"
                type="text"
                size="small"
              >删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分页 -->
    <el-pagination
      layout="prev, pager, next"
      :total="total"
      :page-size="size"
      :current-page.sync="page"
    />
    <!-- 弹出框 -->
    <em-dialog ref="dialog" />
  </div>
</template>

<script>
import { getEmployees, delEmployeeById } from '@/api/employees'
import EMPLOYEECON from '@/api/constant/employees'
import EmDialog from './components/EmDialog.vue'

export default {
  name: 'Employees',
  components: { EmDialog },
  data() {
    return {
      tableData: [],

      page: 1,
      size: 3,
      total: 0
    }
  },
  watch: {
    page() {
      this.getData()
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 导出
    async exportExcel() {
      const res = await getEmployees({ page: 1, size: 99999 })
      // console.log(res)
      // this.tableData = res.rows

      const header = Object.keys(EMPLOYEECON.excelMap)
      // console.log(header)
      const data = res.rows.map((v) => {
        const _arr = []
        header.forEach((zhkey) => {
          const enkey = EMPLOYEECON.excelMap[zhkey]

          const value = v[enkey]
          _arr.push(value)
        })

        return _arr
      })
      import('@/vendor/Export2Excel').then((excel) => {
        excel.export_json_to_excel({
          header, // 表头 必填
          data, // 具体数据 必填
          filename: 'excel-list', // 非必填
          autoWidth: true, // 非必填
          bookType: 'xlsx' // 非必填
        })
      })
    },
    async onConfirm(row) {
      await delEmployeeById(row.id)
      // console.log(res)
      this.getData()
    },
    // 显示弹框
    ShowDialog() {
      // console.log(this.$refs)
      this.$refs.dialog.dialogFormVisible = true
    },
    async getData() {
      const res = await getEmployees({ page: this.page, size: this.size })
      // console.log(res)
      this.tableData = res.rows
      this.total = res.total
    },
    formatEmp(row) {
      // console.log(row)
      const res = EMPLOYEECON.hireType.filter((v) => {
        if (v.id === parseInt(row.formOfEmployment)) {
          return true
        }
      })[0]
      return res ? res.value : ''
    },
    handleClick(row) {
      this.$router.push({ name: 'detail', params: { id: row.id }})
    }
  }
}
</script>

<style lang="scss">
.employees {
  .el-pagination {
    text-align: center;
    margin-top: 10px;
  }
  .el-card {
    margin-top: 10px;
  }
  .el-row {
    align-items: center;
    .info-box {
      text-align: center;
      background-color: #96d7ff;
      border: 1px solid #e6f7ff;
      display: inline-block;
      padding: 5px;
    }
    i {
      color: #5889fe;
    }
  }
}
</style>
